<template lang="pug">
.commonlist(v-show="isShow")
  .commonlist-list
    .nodata(v-if="!list.length && !loading") 暂无记录
    van-list(
      ref="listRef"
      v-else
      v-model:loading="loading"
      :finished="finished"
      @load="onLoad"
      :immediate-check="false"
      offset="88"
    )
      .list-item(v-for="(item, index) in list" :key="'record' + index")
        .order {{ index + 1 }}
</template>

<script>
import { ref, getCurrentInstance, watch, onMounted } from "vue";
export default {
  name: "commonList",
  props: {
    params: {
      type: Object,
      default: () => {},
    },
    listKey: {
      type: String,
      default: "list",
    },
    ajaxKey: {
      type: String,
      default: "",
    },
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const list = ref([]); // 列表数据
    const loading = ref(true);
    const finished = ref(false); // 是否加载完
    const total = ref(0); // 总数
    // const scrollTop = ref(0); // 滚动条位置
    const currentPage = ref(0); // 当前页码
    const recordAllPage = ref(0); // 总页数
    const { proxy } = getCurrentInstance();
    const pageSize = 10;
    const listRef = ref();
    const first = ref(true);

    // // 获取数据
    const getData = () => {
      if (props.ajaxKey) {
        return proxy.$api[props.ajaxKey]({
          pageNo: currentPage.value + 1,
          pageSize: pageSize,
          ...props.params,
        })
          .then((res) => {
            if (+res.status === 0 && res.data) {
              total.value = res.data.total;
              if (res.data.current !== 1) {
                list.value = list.value.concat(res.data[props.listKey]);
              } else {
                list.value = res.data[props.listKey];
              }
              if (list.value.length >= res.data.total) {
                finished.value = true;
              }
              currentPage.value = res.data.current;
              recordAllPage.value = res.data.pages;
              loading.value = false;
            } else {
              loading.value = false;
            }
          })
          .catch(() => {
            loading.value = false;
          });
      }
    };
    const onLoad = () => {
      // loading.value 会自动变为true
      if (list.value.length && list.value.length >= total.value) {
        finished.value = true;
        return;
      }
      console.log("loading.value:", loading.value);
      setTimeout(() => {
        getData();
      }, 500);
      console.log("滚动到底部了");
    };

    onMounted(() => {
      if (props.isShow && first.value) {
        // 第一次展示触发加载
        first.value = false;
        listRef.value.check();
      }
    });
    watch(
      () => props.isShow,
      (nv) => {
        if (nv && first.value) {
          // 第一次展示触发加载
          first.value = false;
          listRef.value.check();
        }
      }
    );

    return {
      listRef,
      total,
      list,
      onLoad,
      loading,
      finished,
    };
  },
};
</script>

<style scoped lang="stylus">
.commonlist {
  .commonlist-list {
    margin: 0 auto;
    width: 6rem;
    height: 5.6rem;
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
      width: .21rem;
      display: block;
    }

    /* 滚动槽 */
    &::-webkit-scrollbar-track {
      border-radius: .09rem;
    }

    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      background: #FF6400;
      border-radius: .09rem;
    }

    .nodata {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 3rem;
      margin-top: -2rem;
      position: absolute;
      top: 50%;
      left: 0;
      color: #FF972D;
      font-weight: bold;
      font-size: .34rem;
    }

    .list-item {
      width: 100%;
      margin: .12rem auto;
      padding: 0 .51rem 0 .28rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .order {
        width: .44rem;
        height: .44rem;
        border-radius: .22rem;
        border: .04rem solid #FF972D;
        display: flex;
        justify-content: center;
        font-size: .2rem;
        font-weight: bold;
        color: #FFC992;
        line-height: .38rem;
      }
    }

  }
}
</style>
